<template>
  <div class="box">
      <div class="header">
        <van-icon name="bars" />
        <div class="search">
          <van-search
            id="sear"
            v-model="value"
            shape="round"
            background="#e43130"
            placeholder="请输入搜索关键词"
            @click="search"
          />
        </div>
        <span class="lef" v-if="isLogin" @click="goUser">我的</span>
        <span class="lef" v-else @click="goLogin">登录</span>
      </div>
      <div class="content" ref="content" @scroll="showBackTop">
        <!-- 下拉刷新 pullRefresh -->
        <van-pull-refresh v-model="isLoading" ref="con" @refresh="onRefresh" success-text="刷新成功">
          <!-- swipe 轮播图 -->
          <van-swipe :loop="true" class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in swipeList" :key="item.bannerid">
              <img :src="item.img" alt="">
            </van-swipe-item>
          </van-swipe>
          <!-- 快速导航 嗨购超市... -->
          <van-grid :border="false" :column-num="5" icon-size="38px">
            <van-grid-item
              v-for="item of navList"
              :key="item.navid"
              :icon="item.imgurl"
              :text="item.title" />
          </van-grid>
          <!-- 京东秒杀 -->
          <div class="seckill">
            <div class="seckill-top">
              <div class="seckill-left">
                <div class="ms-left"><p>秒杀抢购</p></div>
                <div class="ms-middle"><p>{{ targetHour }}点场</p></div>
                <div class="ms-right">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="seckill-right">查看更多</div>
            </div>
            <div class="seckill-bottom">
              <div class="pro" v-for="item of killList" :key="item.proid" @click="goDetail(item.proid)">
                <div class="pro-img">
                  <img :src="item.img1" />
                </div>
                <div class="pro-price">{{ item.originprice }}</div>
                <del class="pro-del">{{ item.originprice }}</del>
              </div>
            </div>
          </div>
          <!-- 上拉加载数据 + ProList商品列表 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad" >
            <!-- 调用ProList产品列表 -->
            <proList :pro="proList" :cos="cos" :go="goDetail" />
          </van-list>
        </van-pull-refresh>
        <div class="top" @click="backTop" v-show="backTopShow">
          <van-icon name="back-top"  size="30" />
        </div>
        <div class="switch btn" @click="switchSate">
          <van-icon name="apps-o" class="btn" v-if="cos==='cos_2'" size="30" />
          <van-icon name="bars" class="btn" v-else size="30" />
        </div>
      </div>
      <!-- 遮罩层 -->
      <van-overlay :show="show">
        <div class="header">
          <van-icon name="arrow-left" @click="search" />
          <div class="search">
            <van-search
              id="searShow"
              ref="getFocus"
              v-model="value"
              shape="round"
              background="#e43130"
              placeholder="请输入搜索关键词"
              @input="input"
            />
          </div>
          <span class="lef" @click="searchData">搜索</span>
        </div>
        <div class="cont">
          <van-row>
            <dd v-show="!searFlag">
              <dl v-show="historyFlag">
                <h5>历史搜索</h5>
                <van-col v-for="(item, index) of historyList" @click="hisClick(index)" :key="index" v-show="item" offset="1">{{ item }}</van-col><br><br>
              </dl>
              <h5>热门搜索</h5>
              <van-col v-for="(item, index) of hotList" @click="hotClick(index)" :key="index" v-show="item.keyword" offset="1">{{ item.keyword }}</van-col>
            </dd>
          </van-row>
          <div v-show="searFlag">
            <van-cell v-for="(item, index) of searchList" :key="index" :value="item.brand" @click="proClick(index)" />
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { getSwipeData, getProData, getKillData, getSearchData, getHotword } from '@/api/home.js'
import proList from '@/components/proList'
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  List,
  Icon,
  PullRefresh,
  // Toast,
  CountDown,
  Search,
  Overlay,
  Cell,
  CellGroup,
  Col,
  Row
} from 'vant'
import { mapState, mapMutations } from 'vuex'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(List)
Vue.use(CountDown)
Vue.use(PullRefresh)
Vue.use(Search)
Vue.use(Overlay)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
// Vue.directive('focus', {
//   inserted (el) {
//     el.focus()
//   }
// })

export default {
  data () {
    return {
      navList: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ],
      swipeList: [],
      proList: [],
      killList: [],
      count: 2,
      backTopShow: false,
      loading: false,
      finished: false,
      isLoading: false,
      cos: 'cos_2',
      targetHour: 0,
      time: 1 * 60 * 60 * 1000,
      value: '',
      searchList: [],
      show: false,
      hotList: []
    }
  },
  computed: {
    ...mapState (['isLogin', 'aa']),
    historyList () {
      var his = localStorage.getItem('historyList') || []
      if (his.length === 0) {
        return []
      }
      return his.split(',')
    },
    historyFlag () {
      if (this.historyList.length === 0) return false
      else return true
    },
    searFlag () {
      if (this.searchList.length === 0) return false
      else return true
    },
    isLogin () {
      return this.$store.state.isLogin
    }
  },
  components: {
    proList
  },
  async mounted () {
    this.swipeList = await getSwipeData()
    this.killList = await getKillData()
    this.hotList = await getHotword()
    this.proList = await getProData()
    if (localStorage.getItem('height')) {
      this.$refs.content.scrollTop = localStorage.getItem('height')
      localStorage.removeItem('height')
    }
  },
  created () {
    // 倒计时处理
    var d = new Date()
    var hour = d.getHours()
    var minutes = 60 - d.getMinutes()
    var seconds = 60 - d.getSeconds()
    this.time = (hour % 2 === 1 ? 0 : 60 * 60 * 1000) + minutes * 60 * 1000 + seconds * 1000
    if (hour % 2 === 1) this.targetHour = hour - 1
    else this.targetHour = hour
    if (hour === 24) this.targetHour = 0
  },
  methods: {
    ...mapMutations({ changeIsLogin: 'changeIsLogin'}),
    async onLoad () {
      var res = await getProData({ count: this.count })
      this.proList = [...this.proList, ...res]
      this.count++
      this.loading = false
      if (res.length <= 0) this.finished = true
    },
    goLogin () {
      this.$router.push('/login')
    },
    goUser () {
      this.$router.push('/user')
    },
    async input () {
      var params = {
        category: this.value
      }
      this.searchList = await getSearchData(params)
      console.log(this.searchList)
    },
    hisClick (index) {
      this.value = this.historyList[index]
      this.input()
    },
    hotClick (index) {
      this.$router.push({ path: '/list', query: { keyword: this.hotList[index].keyword } })
    },
    searchData () {
      if (this.historyList.length > 4) {
        this.historyList.push(this.value)
        this.historyList.shift()
      } else {
        var bool = -1
        bool = this.historyList.indexOf(this.value)
        if (bool === -1) this.historyList.push(this.value)
      }
      localStorage.setItem('historyList', this.historyList)
    },
    switchSate () {
      if (this.flag) {
        this.cos = 'cos_2'
        this.flag = !this.flag
      } else {
        this.cos = 'cos_1'
        this.flag = !this.flag
      }
    },
    proClick (index) {
      this.$router.push({ path: '/list', query: { brand: this.searchList[index].brand, category: this.value } })
    },
    backTop () {
      this.$refs.content.scrollTop = 0
    },
    goDetail (pid) {
      localStorage.setItem('height', this.$refs.content.scrollTop)
      // location.href = '/detail/' + pid
      this.$router.push({ name: 'detail', params: { proid: pid } })
    },
    onRefresh () {
      setTimeout(async () => {
        this.isLoading = false
        this.proList = await getProData()
      }, 1000)
    },
    search () {
      var inp = document.querySelector('#searShow')
      setTimeout(() => {
        inp.focus()
      }, 1000)
      this.show = !this.show
      this.value = ''
      this.searchList = []
    },
    showBackTop () {
      this.backTopShow = this.$refs.content.scrollTop > 150
    }
  }
}
</script>

<style lang="stylus" scoped>
html
  font-size 20px
  background-color #eeeeee
.header
  background-color #e43130 !important
  color white
  height 2rem
  display flex
  justify-content space-between
  .search
    width 80%
    .van-search
      height 2rem
  span
    line-height 2rem
    text-align right
    width 10%
  .lef
    text-align left
  .van-icon
    font-size 26px
    padding .3rem 0 0 .5rem
.cont
  width 100%
  height 100%
  background-color #fff
  .van-cell div
    // height 2rem
    width 95%
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
.van-overlay
  z-index 111
  .van-row div
    padding 2px 10px
    font-size 10px
    margin-top 10px
    text-align center
    background-color #eee
    border-radius 12px
  h5
    padding-top 10px
    font-size 20px
    font-weight 400
    margin-left .8rem
    height 1.6rem
    line-height 1.6rem
.content
  width : 100%
  .my-swipe
    // height 13.5rem
    width 100%
    img
      // height 13.5rem
      width 100%
  .seckill
    width 95%
    height 6.5rem
    margin .5rem
    display flex
    flex-direction column
    border-radius .2rem
    box-sizing border-box
    background-color white
    .seckill-top
      display flex
      height 1.5rem
      justify-content space-between
      .seckill-left
        width 60%
        height 1.5rem
        display flex
        .ms-left
          width 25%
          height 100%
          font-size .6rem
          font-weight 700
          text-align center
          line-height 1.5rem
        .ms-middle
          width 25%
          height 100%
          font-size .6rem
          font-weight 700
          text-align center
          line-height 1.5rem
        .ms-right
          width 50%
          height 100%
          padding-top .15rem
          .colon
            display: inline-block
            margin: 0 4px
            color: #ee0a24
          .block
            display: inline-block
            width: 20px
            color: #fff
            font-size: 12px
            text-align: center
            background-color: #ee0a24
            border-radius .166rem
      .seckill-right
        width 17%
        height 1.5rem
        font-size .6rem
        display flex
        align-items center
        justify-content center
    .seckill-bottom
      width 94%
      flex 1
      padding 0 .3rem
      display flex
      overflow hidden
      flex-wrap wrap
      justify-content space-between
      .pro
        width 18%
        height 100%
        box-sizing border-box
        .pro-img
          width 100%
          height 3rem
          box-sizing border-box
          img
            width 100%
            height 100%
        .pro-price
          padding-top .2rem
          padding-left .4rem
          color #ee0a24
          width 100%
          height 1rem
          font-size .6rem
          font-weight 700
          box-sizing border-box
        .pro-del
          font-size .6rem
          padding-left .4rem
.switch, .top
  opacity .7
  width 2rem
  height 2rem
  bottom 4rem
  right 1.5rem
  position fixed
  border-radius 50%
  background-color #ddd
  z-index 10
  display flex
  text-align center
  justify-content center
  align-items center
  span
    width 1.5rem
    height 1.5rem
    font-size 1.25rem !important
    color white
.top
  bottom 6.5rem
@font-face {
  font-family: "iconfont"; /* Project id 2868946 */
  src: url('https://at.alicdn.com/t/font_2868946_nbwj6o2tmca.woff2?t=1634367031504') format('woff2'),
       url('https://at.alicdn.com/t/font_2868946_nbwj6o2tmca.woff?t=1634367031504') format('woff'),
       url('https://at.alicdn.com/t/font_2868946_nbwj6o2tmca.ttf?t=1634367031504') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-top:before {
  content: "\e69e";
}

.icon-shouye:before {
  content: "\e600";
}

.icon-gouwuchekong:before {
  content: "\e601";
}

.icon-fenlei:before {
  content: "\e602";
}

.icon-adduser:before {
  content: "\e7ae";
}

</style>
